<template>
  <j-modal
    switchFullscreen
    :title="title"
    width="70%"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <template slot="footer">
      <a-button type="primary" @click="handleOk" v-if="!buttonStatu">确认</a-button>
      <a-button @click="handleCancel">取消</a-button>
    </template>
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row :gutter="24">
<!--          <a-col :md="12" :sm="24">-->
<!--            <a-form-item-->
<!--              :labelCol="labelCol"-->
<!--              :wrapperCol="wrapperCol"-->
<!--              label="公司编号"-->
<!--            >-->
<!--              <a-input-search placeholder="请选择公司" v-decorator="['companyCode',validatorRules.companyName]"-->
<!--                              readOnly enter-button @search="custSearch" />-->
<!--              <a-input type="hidden"-->
<!--                       v-decorator="['companyName', {}]"-->
<!--              />-->
<!--            </a-form-item>-->
<!--          </a-col>-->
          <a-col :md="12" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="经销商"
            >
              <a-input-search v-decorator="['custCode',validatorRules.custName]" placeholder="请选择经销商"
                              readOnly enter-button @search="custSearch1" />
              <a-input type="hidden"
                       v-decorator="['custName', {}]"
              />
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="证件名称"
              hasFeedback
            >
              <a-input
                placeholder="请输入证件名称"
                v-decorator="['credentialsName', {}]"
              />
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="证件类型"
              hasFeedback
            >
              <cn-dict-select-tag
                :options="{ value: 'credentialsType', label: 'dictDataDesc' }"
                :triggerChange="true"
                dictCode="credentials_type"
                v-decorator="['credentialsType',validatorRules.credentialsType]"
                placeholder="请选择证件类型"
              />
<!--&lt;!&ndash;              <a-input&ndash;&gt;     @change="canbuydimen"-->
<!--                type="hidden"-->
<!--                placeholder="请输入"-->
<!--                v-decorator="['credentialsType', validatorRules.credentialsType]"-->
<!--              />-->
              <!--          <a-date-picker showTime format="YYYY-MM-DD HH:mm:ss" v-decorator="[ 'punchTime', {}]" />-->
            </a-form-item>
          </a-col>
          <a-col :md="24" :sm="24">
            <a-form-item
              :labelCol="{
                xs: { span: 24 },
        sm: { span: 3 },
              }"
              :wrapperCol="{
                xs: { span: 24 },
        sm: { span: 20 },
              }"
              label="证件附件"
            >
              <HUpload v-bind="loadDatas" ref="hupload" v-decorator="['url']" @loadOk="handleChange"></HUpload>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <proChose ref="prochoose" @okbro="okbropro" v-bind="modalProps"></proChose>
    </a-spin>
  </j-modal>
</template>

<script>
import proChose from '@comp/cn-components/ProChose'
import { httpAction } from '@/api/manage'
import { pick } from 'lodash'
import moment from 'moment'
import JTreeSelect from '@/components/cn-form/JTreeSelect'
import JAreaLinkage from '@comp/cn-form/CnAreaLinkage'
import { isMobile } from '@/utils/validate'
import { isNil } from 'lodash'
// import JUpload from '@/components/cn-form/JUpload'
import UploadImage from '@/components/upload-image/UploadImage'
import HUpload from '@/components/cn-components/Hupload'

import Area from '@/components/utils/Area'

export default {
  name: 'companyCredentialsModal',
  data() {
    return {
      name:'',
      buttonStatu:false,
      urls: [],
      actionUrl: window._CONFIG['domianUploadURL']+ '/cnUploadController/uploadOss',
      lastIndexOf: 0,
      unloadData: {
        a: 5
      },
      areaLinkage: '',
      province: '',
      city: '',
      area: '',
      title: '操作',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },

      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        telephone: {
          rules: [
            { required: true, message: '', trigger: 'submit' },
            {
              validator: function(rule, value, callback) {
                if (!isMobile(value)) {
                  callback(new Error(''))
                }
                callback()
              }
            }
          ]
        }
      },
      addOrUpdateUrl: window._CONFIG['domianDmsURL'] + '/companyCredentials/saveOrUpdateEntity'
    }
  },
  components: { JTreeSelect, JAreaLinkage, proChose, HUpload, UploadImage },
  created() {
    this.initAreaData()
  },
  methods: {
    handleChange(info) {
      if (info == 0) {
        this.urls = []
      } else {
        this.urls = info
      }
    },
    okbropro(val) {
      let custCode = val[0].custCode
      let custName = val[0].custName
      this.form.setFieldsValue({
        custCode: custCode,
        custName: custName
      })
    },
    custSearch(status) {
      let formconfig = [
        {
          key: 'companyCode',
          label: '公司编号'
        },
        {
          key: 'companyName',
          label: '公司名称'
        }
      ]
      let tableconfig = {
        columns: [
          {
            title: '公司编号',
            align: 'center',
            dataIndex: 'companyCode',
            width: 120,
            ellipsis: true
          },
          {
            title: '公司名称',
            align: 'center',
            dataIndex: 'companyName',
            width: 120,
            ellipsis: true
          }
        ],
        list: window._CONFIG['domianURL'] + '/company/getPageList',
        multiple: false,
        columW: 8
      }
      this.name = '经销商'
      this.$refs.prochoose.edit(formconfig, tableconfig, status)
    },
    custSearch1(status) {
      this.$refs.prochoose.rowKey='custCode'
      let formconfig = [
        {
          key: 'custCode',
          label: '经销商编号'
        },
        {
          key: 'custName',
          label: '经销商名称'
        }
      ]
      let tableconfig = {
        columns: [
          {
            title: '经销商编号',
            align: 'center',
            dataIndex: 'custCode',
            width: 120,
            ellipsis: true
          },
          {
            title: '经销商名称',
            align: 'center',
            dataIndex: 'custName',
            width: 120,
            ellipsis: true
          },
        ],
        list: window._CONFIG['domianURL'] + '/customerController/getPageList',
        multiple: false,
        columW: 10
      }
      this.name = '经销商'
      this.$refs.prochoose.edit(formconfig, tableconfig, status)
    },
    add() {
      this.edit({})
    },
    edit(record, status) {
      let that = this
      this.buttonStatu = false
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, Object.keys(this.model)))
        if(!record.accessory){
          that.$refs.hupload.fileList = []
        }else{
          that.$refs.hupload.fileList = record.accessory.map((item, index) => {
            return {
              uid: index,
              name: item.name,
              status: 'done',
              url: item.url
            }
          })
        }
      })
      if(status == 'detail'){
        this.buttonStatu = true
      }
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let method = ''
          if (!this.model.id) {
            method = 'post'
          } else {
            method = 'post'
          }
          let formData = Object.assign(this.model, values)
          formData.accessory = this.urls
          //时间格式化
          // formData.punchTime = formData.punchTime ? formData.punchTime.format('YYYY-MM-DD HH:mm:ss') : null;
          // formData.birthday = formData.birthday ? formData.birthday.format() : null;

          // console.log(formData)
          httpAction(this.addOrUpdateUrl, formData, method)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
            })
        }
      })
    },
    handleCancel() {
      this.close()
    },
    areaChange(code) {
      this.model.province = this.areaData.getText(code).split('/')[0]
      this.model.city = this.areaData.getText(code).split('/')[1]
      this.model.area = this.areaData.getText(code).split('/')[2]
    },
    initAreaData() {
      if (!this.areaData) {
        this.areaData = new Area()
      }
    }
  },
  computed: {
    loadDatas() {
      return {
        actionUrl: this.actionUrl,
        text: '上传附件'
      }
    },
    modalProps(){
      return{
        name:this.name,
      }
    }
  }
}
</script>

<style scoped></style>